{extend name="public/world"}
{block name="style"}
<style type="text/css">
    .descTips {
        margin-left: 2px;
    }
    .teamTips {
        margin-right: 2px;
    }
    .layui-table-body .layui-table tr {height:52px;}
    .layui-table-view .layui-table[lay-size=lg] .layui-table-cell {
        height: 40px;
    }
    .layui-progress-big, .layui-progress-big .layui-progress-bar {
        height: 10px;
        line-height: 10px;
    }
    .layui-progress-text {
        line-height: 10px;
    }
    .project-stats small {
        margin-right: 10px;
        color: #999;
    }
    .layui-btn-a{
        color: #504eaf;
        background-color: transparent;
        text-decoration: none;
        outline: none;
        cursor: pointer;
        transition: color .3s;
        -webkit-text-decoration-skip: objects;
    }
    .layui-btn-a:hover {
        color: #7773bd;
    }
    .layui-team-tips {
        min-width: 120px;
        max-width: 200px;
    }
    .layui-btn-status {
        display: inline-block;
        height: 18px;
        line-height: 18px;
        padding: 0 10px;
        background-color: #393D49;
        color: #fff;
        white-space: nowrap;
        text-align: center;
        font-size: 13px;
        border-radius: 100px;
        border: none;
        cursor: pointer;
    }
    .status0 {background-color:#393D49}/*待启动*/
    .status1 {background-color:#01AAED}/*施工中*/
    .status2 {background-color:#009688}/*已完工*/
    .layui-form-select dl dd, .layui-form-select dl dt {
        padding: 0 10px;
        line-height: 22px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
{/block}
{block name="container"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form" lay-filter="formSearch">
                <div class="layui-field-box" style="padding:0;">
                    <div class="layui-form-item" style="margin-bottom:0">
                        <div class="layui-inline my-search">
                            <div class="layui-input-inline">
                                <input type="text" name="name" value="" placeholder="项目名称" autocomplete="off" class="layui-input" lay-filter="name">
                            </div>
                            <div class="layui-input-inline" style="width: 120px;">
                                <select name="status" lay-filter="status">
                                    <option value="">项目状态</option>
                                    {volist name="statuss" id="sta"}
                                    <option value="{$key}">{$sta}</option>
                                    {/volist}
                                </select>
                            </div>
                            <div class="layui-input-inline" style="width: 120px;">
                                <select name="type" lay-filter="type">
                                    <option value="">项目分类</option>
                                    {volist name="types" id="type"}
                                    <option value="{$key}">{$type}</option>
                                    {/volist}
                                </select>
                            </div>
                            <div class="layui-input-inline" style="width: 120px;">
                                <select name="sys" lay-filter="sys">
                                    <option value="">项目归属</option>
                                    <option value="0">内部项目</option>
                                    <option value="1">外部项目</option>
                                </select>
                            </div>
                            <div class="layui-input-inline" style="width: 120px;">
                                <select name="role_user" lay-filter="role_user" lay-search>
                                    <option value="">部门/成员</option>
                                    {volist name="users" id="user"}
                                    {if isset($user.sales)}
                                        <option value="r-{$user.id}">{$user.role_name}</option>
                                        {volist name="user.sales" id="sale"}
                                        <option value="u-{$sale.id}">　　{$sale.real_name}</option>
                                        {/volist}
                                    {else /}
                                    <option value="u-{$user.id}">　　{$user.real_name}</option>
                                    {/if}
                                    {/volist}
                                </select>
                            </div>
                            <div class="layui-input-inline" style="width: 170px;">
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" title="清除条件" style="padding: 0 8px;" lay-submit lay-filter="reset"><i class="layui-icon" style="color:#009688;">&#xe640;</i></button>
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit lay-filter="search">搜索</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/html" id="barDemo">
    {if isset($sonAuth['edit'])}
    {{# if(d.status != 2) { }}
    <a href="{:url('/projects.Index/edit')}?id={{ d.id }}" class="layui-btn layui-btn-xs j-iframe-pop" lxb-data="{width: '670px', height: '570px'}" title="修改项目">修改</a>
    {{# } }}
    {/if}
    {if isset($sonAuth['del'])}
    {{# if(d.status == 0) { }}
    <a href="{:url('/projects.Index/del')}?id={{ d.id }}" class="layui-btn layui-btn-xs layui-btn-danger j-tr-del">删除</a>
    {{# } }}
    {/if}
</script>
<script type="text/html" id="toolbar">
    <div class="layui-btn-group fl">
        {if isset($sonAuth['add'])}
        <a href="{:url('/projects.Index/add')}" class="layui-btn layui-btn-sm layuiadmin-btn-admin j-iframe-pop" lxb-data="{width: '670px', height: '550px'}" title="添加项目">添加项目</a>
        {/if}
    </div>
</script>
<script>
    layui.use(['form','table','element'], function() {
        var $ = layui.jquery
            , form = layui.form
            , table = layui.table
            , element = layui.element;
        form.on('submit(search)', function(){
            AtableIns.reload({
                where: form.val("formSearch"),
                page: {curr: 1}
            });
        });
        //头工具栏事件
        form.on('submit(reset)', function(){
            var searchs = form.val("formSearch");
            for (var i in searchs) {
                searchs[i] = '';
            }
            form.val("formSearch", searchs);
            AtableIns.reload({
                where: null,
                page: {curr: 1}
            });
        });

        $("#App_tabsheader>li", parent.document).click(function(){
            AtableIns.reload();
        });
        var AtableIns = table.render({
            elem: '#dataTable'
            ,url: "{:url('/projects.Index/index')}" //数据接口
            ,where: form.val("formSearch")
            ,page: true //开启分页
            ,skin: 'row'
            ,size: 'lg'
            ,even: true
            ,limit: 10
            ,text: {
                none : '暂无项目'
            }
            ,toolbar: '#toolbar'
            ,defaultToolbar: false
            ,cols: [[ //表头
                {field: 'id', width: 80, title: '编号', fixed: 'left', templet: function(d){
                    return '#'+d.id;
                }}
                ,{fixed: 'left', width: 80, title: '状态', templet: function(d){
                    return '<div><a lay-href="{:url(\'/projects.Index/show\')}?id='+d.id+'" class="layui-btn-status status'+ d.status +'" lay-text="#'+d.name+'">'+ d.statustext +'</a></div>';
                }}
                ,{field: 'name', width: 200, title: '项目名称', templet: function(d){
                    return '<div><a lay-href="{:url(\'/projects.Index/show\')}?id='+d.id+'" class="layui-btn-a" lay-text="#'+d.name+'">'+ d.name +'</a><i class="descTips layui-icon layui-icon-about" lay-desc="'+d.description+'"></i></div>';
                }}
                ,{field: 'account', width: 255, title: '进程/进度', templet: function(d){
                    var str = '<div class="project-stats" style="line-height: 28px;">';
                    for (var i=0;i<d.progress_list.length;i++)
                    {
                        str += '<strong title="任务数">'+d.progress_list[i]['total']+'</strong><small>'+d.progress_list[i]['title']+'</small>';
                    }
                    return str + '</div>' +
                        '<div style="line-height: 8px;">' +
                        '   <div class="layui-progress layui-progress-big" lay-showPercent="yes">' +
                        '       <div class="layui-progress-bar layui-bg-'+d.progress_color+'" lay-percent="'+d.progress+'"></div>' +
                        '   </div>' +
                        '</div>';
                }}
                ,{field: 'start_at', width: 110, title: '项目启动时间'}
                ,{field: 'end_at', width: 110, title: '预计完成时间'}
                ,{field: 'finish_at', width: 110, title: '实际交付时间'}
                ,{field: 'create_at', width: 110, title: '项目创建时间'}
                ,{field: 'team', width: 80, title: '成员', templet:function(d){
                    return '<div><i class="teamTips layui-icon layui-icon-group"></i><a href="javascript:;" class="teamATips layui-btn-a" data-id="'+d.id+'">成员</a></div>';
                }}
                ,{field: 'account', width: 90, title: '创建/修改人'}
                ,{field: 'typetext', width: 100, title: '项目分类'}
                ,{field: 'systext', width: 60, title: '归属', templet:function(d){
                    if(d.sys===0) return '<div>内部</div>';
                    else return '<div>外部</div>';
                }}
                ,{fixed: 'right', width: 120, title: '操作', templet: '#barDemo'}
            ]]
            ,done : function() {
                element.render();
                $('.descTips').on('mouseover', function() {
                    var that = this;
                    layer.tips($(that).attr('lay-desc'), that, {
                        time : 0,
                        tips : [2, '#5a5a5a']
                    });
                }).on('mouseout', function() {
                    layer.closeAll('tips');
                });
                var trigger = null;
                $('.teamATips').on('mouseover', function() {
                    var that = this;
                    var id = $(that).data('id') || 0;
                    if(!id) return false;
                    trigger = setTimeout(function(){
                        $.ajax({
                            type: 'POST',
                            url: "{:url('/projects.Produce/public_ajax_team')}",
                            data: {id:id},
                            dataType: "json",
                            success:function(res) {
                                if (res.code == 1) {
                                    layer.tips(res.html, that, {
                                        time : 0,
                                        tips : [3, '#5a5a5a']
                                    });
                                } else {
                                    return false;
                                }
                            }
                        });
                    },200);
                }).on('mouseout', function() {
                    clearTimeout(trigger);
                    layer.closeAll('tips');
                });
            }
        });
    });
</script>
{/block}